<template>
  <a-tooltip placement="bottom">
    <template slot="title">
      <span>字体大小</span>
    </template>
    <a-input-number style="margin-left: 10px" size="small" v-model="innerValue"
                    :disabled="disabled" step="1" class="table-design-font-size"
                    :min="8" :max="60" />
  </a-tooltip>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'FontSize',
  model: createModelForVue(),
  props: {
    section: createProps(Object, undefined),
    value: createProps(Number),
    disabled: createProps(Boolean),
  },
  computed: {
    innerValue: {
      get() {
        return parseInt((this.value || 8) + '');
      },
      set(v) {
        this.$emit('change', v);
        this.section && this.section.setStyle && this.section.setStyle('fontSize', v);
      },
    }
  }
}
</script>
<style>
.table-design-font-size .ant-input-number-handler-wrap {
  display: none;
}
</style>